<template>
  <a-form-model
    ref="taskForm"
    :model="taskForm"
    :rules="taskRules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-card title="案件详情" :loading="loading">
      <a-row :gutter="20">
        <a-col :span="12">
          <a-card title="基本信息">
            <a-form-model-item label="合同编号">
              <a-input v-model="businessForm.contract_no" type="text" disabled/>
            </a-form-model-item>
            <a-form-model-item label="业务编号">
              <a-input v-model="businessForm.business_no" type="text" disabled/>
            </a-form-model-item>
            <a-form-model-item label="所属顾问">
              <a-input v-model="businessForm.username" type="text" disabled/>
            </a-form-model-item>
            <a-form-model-item label="客户姓名">
              <a-input v-model="businessForm.customer_name" type="text" disabled/>
            </a-form-model-item>
            <a-form-model-item label="联系电话">
              <a-input v-model="businessForm.phone" type="text" disabled/>
            </a-form-model-item>
            <a-form-model-item label="业务开启时间">
              <a-input v-model="businessForm.open_time" type="text" disabled/>
            </a-form-model-item>
<!--            <a-form-model-item label="业务类别">-->
<!--              <div v-for="(item, index) in categoryOpts" :key="index">-->
<!--                <a-input v-if="businessForm.category === index" :value="item" type="text" disabled/>-->
<!--              </div>-->
<!--            </a-form-model-item>-->
            <a-form-model-item label="业务名称">
              <a-input v-model="businessForm.business_name" type="text" disabled/>
            </a-form-model-item>
            <a-form-model-item label="价格">
              <a-input v-model="businessForm.price" type="text" disabled/>
            </a-form-model-item>
            <a-form-model-item label="官费">
              <a-input v-model="businessForm.official_fee" type="text" disabled/>
            </a-form-model-item>
            <a-form-model-item label="申请主体">
              <a-input v-model="businessForm.subject" type="text" disabled/>
            </a-form-model-item>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="业务材料">
            <a-alert>
              <template slot="message">
                整理后的材料：<a @click="download(businessForm.mat_file, businessForm.mat_filename)">{{businessForm.mat_filename}}</a>
              </template>
            </a-alert>
            <a-divider />
            <a-descriptions :column="1">
              <a-descriptions-item v-for="(item,index) in mats" :key="index" :label="item.mat_name">
                <div v-if="item.type === 'text'">{{item.value}}</div>
                <div v-if="item.type === 'image'">
                  <img style="width: 40px; height: 40px;cursor: pointer" :src="item.value" @click="handlePreview(item.value)">
                  <a-button size="small" type="link" icon="download" @click="download(item.value, '')"></a-button>
                </div>
                <div v-if="item.type === 'file'">
                  <a-button size="small" type="link" @click="download(item.value, item.filename)">{{item.filename}}</a-button>
                </div>
                <div v-if="item.type === 'file-xls'">
                  <a-button size="small" type="link" icon="download" @click="download(item.value, item.filename)">{{item.filename}}</a-button>
                </div>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>
          <a-card title="流转记录" style="margin-top:20px">
            <a-timeline>
              <a-timeline-item v-for="item in historyData" :key="item.circul_id">{{item.step}} {{item.username}}，{{item.notes}} {{item.created_at}} <a :href="item.file">{{item.filename}}</a></a-timeline-item>
            </a-timeline>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </a-form-model>
</template>

<script>
  import { getView } from '@/api/four.process'
  import apis from '@/api'

  export default {
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    name: 'FourDetail',
    data () {
      return {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
        taskForm: {},
        taskRules: {},
        businessForm: {},
        categoryOpts: {},
        businessOpts: {},
        historyData: [],
        mats: {},
        loading: true,
        previewImage: '',
        previewVisible: false
      }
    },
    activated () {
      if (this.isEdit) {
        const id = this.$route.params && this.$route.params.id
        getView(id).then(res => {
          this.loading = true
          if (res.status === 0) {
            this.businessForm = res.result.contract_business
            this.categoryOpts = res.result.business_category_opts
            this.businessOpts = res.result.business_opts
            this.historyData = res.result.histories
            this.mats = res.result.mats
            this.loading = false
          }
        })
      }
    },
    methods: {
      download (value, filename) {
        window.open(apis.Download + '?value=' + value + '&filename=' + filename)
      },
      filterOption (input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      },
      handlePreview (file) {
        this.previewImage = file
        this.previewVisible = true
      },
      handleCancel () {
        this.previewVisible = false
      }
    }
  }
</script>

<style scoped>

</style>
